<script setup>
import {
	ref
} from "vue"
import { uniFetch } from '../../api/uni-fetch';
const model = ref({
	userInfo: {
		name: '',
		phone: '',
		id: ''
	}
})

const rules = {
	'userInfo.name': {
		type: 'string',
		required: true,
		message: '请填写姓名',
		trigger: ['blur', 'change']
	},
	'userInfo.phone': [{
		type: 'string',
		required: true,
		message: '请填写手机号',
		trigger: ['blur', 'change']
	}, {
		validator: (rule, value, callback) => {
			return uni.$u.test.mobile(value);
		},
		message: '手机号码不正确',
		// 触发器可以同时用blur和change
		trigger: ['change', 'blur'],
	}],
	'userInfo.id': {
		type: 'string',
		required: true,
		message: '请填写身份证',
		trigger: ['blur', 'change']
	}
};

const form = ref(null)
const onSubmit = async () => {
	const res = await form.value.validate()
	console.log(res);
	if (res) {
		const sres = await uniFetch.post('/shop-join/add', {
			name: model.value.userInfo.name,
			phone: model.value.userInfo.phone,
			id_card: model.value.userInfo.id,
			app_id: uni.appId
		})
		console.log(sres);
		if (sres.code === 10000) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				mask: true
			})
			return uni.switchTab({ url: '/pages/mine/mine.vue' })
		}
		uni.showToast({
			title: sres.msg,
			icon:'none'
		})
	}
}
</script>

<template>
	<view class="agency-dealer">
		<view class="logo">

			<view class="avatar-wai">
				<view class="avatar-nei">
					<image src="/static/logo1.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="joinus">
				<image src="../../static/images/joinus.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="fill-area">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="form">
				<u-form-item :borderBottom="false" labelPosition="top" :labelWidth="60" label="姓名" prop="userInfo.name">
					<u--input v-model="model.userInfo.name"></u--input>
				</u-form-item>
				<u-form-item :borderBottom="false" :labelWidth="60" label="手机号" prop="userInfo.phone">
					<u--input v-model="model.userInfo.phone"></u--input>
				</u-form-item>
				<u-form-item :borderBottom="false" :labelWidth="60" label="身份证" prop="userInfo.id">
					<u--input v-model="model.userInfo.id"></u--input>
				</u-form-item>
			</u--form>

			<button @click="onSubmit">提交</button>
		</view>


	</view>
</template>


<style lang="scss" scoped>
.agency-dealer {
	min-height: 100vh;
	background-color: #fff;

	.logo {
		padding: 50rpx 0;
		background-color: #fff;

		.avatar-wai {
			margin: 0 auto;
			padding-top: 2rpx;
			box-sizing: border-box;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			background-color: #fefefe;

			.avatar-nei {
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 156rpx;
				height: 156rpx;
				border-radius: 50%;
				background-color: $custom-theme-color;
				overflow: hidden;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
			}
		}

		.joinus {
			image {
				display: block;
				margin: 45rpx auto;
				width: 250rpx;
			}
		}

	}

	.fill-area {
		margin: 50rpx auto;
		padding: 40rpx;
		background-color: #fff;
		width: 650rpx;

		button {
			margin-top: 100rpx;
			width: 345rpx;
			color: #fefefe;
			background: generate-gradient($custom-theme-color, $custom-theme-color-l);
		}
	}

}
</style>